<!-- dall3 -->
<template>
  <div class="model_url">
    <div class="mb-15px">
      <el-text tag="b">转3d图片</el-text>
      <el-text tag="p"/>
    </div>
    <div>
      <UploadImg
        v-model="imageUrl"
        :fileType="['image/png','image/jpg','image/jpeg']"
        :fileSize="20"
        class="min-w-80px"
      />
    </div>
  </div>

  <div class="hot-words">
    <div>
      <el-text tag="b">表面模式</el-text>
    </div>
    <el-space wrap class="word-list">
      <el-button
        round
        class="btn"
        :type="selectSurfaceMode === surfaceMode.key ? 'primary' : 'default'"
        v-for="surfaceMode in surfaceModeList"
        :key="surfaceMode.key"
        @click="handleSurfaceModeClick(surfaceMode.key)"
      >
        {{ surfaceMode.name }}
      </el-button>
    </el-space>
  </div>

  <div class="hot-words">
    <div>
      <el-text tag="b">拓扑结构</el-text>
    </div>
    <el-space wrap class="word-list">
      <el-button
        round
        class="btn"
        :type="selectTopology === topology.key ? 'primary' : 'default'"
        v-for="topology in topologyList"
        :key="topology.key"
        @click="handleTopologyClick(topology.key)"
      >
        {{ topology.name }}
      </el-button>
    </el-space>
  </div>

  <div class="enable_pbr">
    <div class="mt-15px mb-15px">
      <el-text tag="b">是否启用PBR材质贴图</el-text>
    </div>
    <!--是/否-->
    <el-switch v-model="enablePbr"/>
  </div>

  <div class="btns">
    <el-button type="primary" size="large" round :loading="createIn" @click="handleCreateThreed">
      {{ createIn ? '生成中' : '生成内容' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import {ThreedVO, ThreedApi, ImageTo3dReqVO} from '@/api/ai/threed'
import {
  surfaceModeList, topologyList, AiPlatformEnum, AiCreateThreeDEnum
} from '@/views/ai/utils/constants'

const message = useMessage() // 消息弹窗

// 定义属性
const imageUrl = ref<string>('')
const selectSurfaceMode = ref<string>('organic') // 表面模式
const selectTopology = ref<string>('quad')
const enablePbr = ref<boolean>(false) // 是否启用PBR材质贴图
const createIn = ref<boolean>(false) // 生成中

const emits = defineEmits(['onCreateStart', 'onCreateComplete']) // 定义 emits

/** 艺术样式 */
const handleSurfaceModeClick = async (key: string) => {
  selectSurfaceMode.value = key
}

/** 拓扑结构 */
const handleTopologyClick = async (key: string) => {
  selectTopology.value = key
}

/** 填充值 */
const settingValues = async (threedVO: ThreedVO) => {
  imageUrl.value = threedVO.imageUrl;
  selectSurfaceMode.value = threedVO.surfaceMode;
  selectTopology.value = threedVO.topology;
  enablePbr.value = threedVO.enablePbr;
}

const handleCreateThreed = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    createIn.value = true
    // 回调
    emits('onCreateStart', AiPlatformEnum.MESHY)
    const form = {
      platform: AiPlatformEnum.MESHY, // 平台
      model: AiPlatformEnum.MESHY, // 模型
      funcType: AiCreateThreeDEnum.IMAGE_3D,
      imageUrl: imageUrl.value,
      surfaceMode: selectSurfaceMode.value, // 艺术样式
      topology: selectTopology.value, // 艺术样式
      enablePbr: enablePbr.value, // 艺术样式
    } as ImageTo3dReqVO
    // 发送请求
    await ThreedApi.generateImageTo3d(form)
  } finally {
    // 回调
    emits('onCreateComplete', AiPlatformEnum.MESHY)
    // 加载结束
    createIn.value = false
  }
}
/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
// 提示词
.prompt {
}

// 热词
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 15px;

  .word-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;

    .btn {
      margin: 0;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
